import React, { useState, useEffect } from 'react';
import { Card } from 'antd';
import Resizer from '@/components/Resizer';
import CollapsibleCard, { CardState } from '@/components/CollapsibleCard';
import styles from '../Submit.module.css';

interface ResizablePanelsProps {
  leftPanel: React.ReactNode;
  rightPanel: React.ReactNode;
  leftTitle: string;
  rightTitle: string;
  defaultWidth?: number; // 左侧面板默认宽度百分比
  minWidth?: number;     // 最小宽度百分比
  maxWidth?: number;     // 最大宽度百分比
  storageKey?: string;   // localStorage存储键
}

const ResizablePanels: React.FC<ResizablePanelsProps> = ({
  leftPanel,
  rightPanel,
  leftTitle,
  rightTitle,
  defaultWidth = 50,
  minWidth = 20,
  maxWidth = 80,
  storageKey = 'panelWidth'
}) => {
  const [leftWidth, setLeftWidth] = useState<number>(defaultWidth);
  const [leftCardState, setLeftCardState] = useState<CardState>('normal');
  const [rightCardState, setRightCardState] = useState<CardState>('normal');

  // 从localStorage加载保存的宽度设置
  useEffect(() => {
    if (storageKey) {
      const savedWidth = localStorage.getItem(storageKey);
      if (savedWidth) {
        setLeftWidth(Number(savedWidth));
      }
    }
  }, [storageKey]);

  // 处理面板大小调整
  const handleResize = (delta: number) => {
    // 将delta转换为百分比变化 (像素 -> 百分比)
    const deltaPercent = (delta / window.innerWidth) * 100;
    
    // 计算新的宽度，并限制在最小/最大范围内
    const newWidth = Math.max(
      minWidth,
      Math.min(maxWidth, leftWidth + deltaPercent)
    );
    
    // 只有当宽度真正变化时才更新
    if (newWidth !== leftWidth) {
      setLeftWidth(newWidth);
      
      // 保存到localStorage
      if (storageKey) {
        localStorage.setItem(storageKey, newWidth.toString());
      }
    }
  };

  // 获取左侧面板包装器的类名
  const getLeftPanelWrapperClassName = () => {
    if (leftCardState === 'collapsedLeft') return styles.problemCardMinimized;
    if (leftCardState === 'maximized') return styles.problemCardMaximized;
    return styles.problemCardNormal;
  };

  // 获取右侧面板包装器的类名
  const getRightPanelWrapperClassName = () => {
    if (rightCardState === 'collapsedRight') return styles.editorCardMinimized;
    if (rightCardState === 'maximized') return styles.editorCardMaximized;
    return styles.editorCardNormal;
  };

  return (
    <div className={styles.submitContainer}>
      {/* 左侧面板 */}
      <div 
        className={getLeftPanelWrapperClassName()}
        style={{ 
          width: leftCardState === 'maximized' ? '100%' : 
                 leftCardState === 'collapsedLeft' ? '0' :
                 `${leftWidth}%`
        }}
      >
        <CollapsibleCard
          title={leftTitle}
          defaultState={leftCardState}
          onChange={setLeftCardState}
        >
          {leftPanel}
        </CollapsibleCard>
      </div>

      {/* 调整器 - 只在正常状态下显示 */}
      {leftCardState === 'normal' && rightCardState === 'normal' && (
        <div className={styles.problemResizer}>
          <Resizer onResize={handleResize} direction="horizontal" />
        </div>
      )}

      {/* 右侧面板 */}
      <div 
        className={getRightPanelWrapperClassName()}
        style={{ 
          width: rightCardState === 'maximized' ? '100%' : 
                 rightCardState === 'collapsedRight' ? '0' :
                 leftCardState === 'maximized' ? '0' :
                 leftCardState === 'collapsedLeft' ? '100%' :
                 `${100 - leftWidth}%`
        }}
      >
        <CollapsibleCard
          title={rightTitle}
          defaultState={rightCardState}
          onChange={setRightCardState}
        >
          {rightPanel}
        </CollapsibleCard>
      </div>
    </div>
  );
};

export default ResizablePanels; 